<template>
    <div class="name">
      姓:<input type="text" v-model="firstname"><br>
      名:<input type="text" v-model="lastname"><br>
      <span>姓名：{{ Fullname }}</span><br>
    </div>
    <div>年龄：{{ age }}</div><br>
    <button @click="changeAge">增加年龄</button><br><br>
    <!-- props  属性数据传递 -->
    <div class="child">
      <h3>子组件</h3>
      <h4>子礼物:{{ toy }}</h4>
      <h4>父给的礼物:{{ gift }}</h4>
      <button @click="sendToy(toy)">把玩具给父</button>
    </div>
</template>


<script setup lang="ts" >
    import{ref,computed,watch} from 'vue'
    let firstname=ref('zhang')
    let lastname=ref("san")
    //计算属性
    let Fullname=computed(()=>{
      return firstname.value.slice(0,1).toUpperCase()+firstname.value.slice(1)+'-'+lastname.value
    })
    let age=ref(19)
    function changeAge(){
      age.value++
    }
    //监听watch
    watch(age,(newValue,oldValue)=>{
      console.log('年龄增加了','  当前年龄：'+newValue,'  上一次年龄：'+oldValue)
    })
    //数据传递
    let toy=ref("玩具")
    defineProps(['gift','sendToy'])

</script>




<style scoped>
  .child{
    background-color: pink;
    padding: 10px;
    box-shadow: 0 0 10px black;
    border-radius: 10px;
  }
</style>


